<template>
  <div class="acro-container">
    <div class="logo">
      <!-- <img
        alt="logo"
        src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
      /> -->
      <!-- <div class="logo-text text-black">热水淋浴充值管理平台（民盛）</div> -->
    </div>
    <!-- <LoginBanner /> -->
    <div class="content">
      <div class="content-inner flex items-center w-1/3  bg-white my-class">
        <!-- <img class="object-cover h-full w-1/2" :src="bannerImage" /> -->
        <LoginForm class="w-1/2" />
      </div>
      <div class="footer_login">
        <!-- <Footer /> -->
        <!-- <div class="mt-2">Arco Design Pro</div>
         <div class="mt-2">Arco Design Pro</div>
         <div class="mt-2">Arco Design Pro</div>
         <div class="mt-2">Arco Design Pro</div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

import bannerImage from '@/assets/images/login-banner.png';
import Footer from '@/components/footer/index.vue';
// import LoginBanner from './components/banner.vue';
import LoginForm from './components/login-form.vue';
import { useRouter, useRoute } from 'vue-router';

import { setToken, clearToken } from '@/utils/auth';


const router = useRouter();
const route = useRoute();


onMounted(() => {

  if (route.query.Authorization) {
    const token = route.query.Authorization.split(' ')[1];
    setToken(token);
      router.push({
        name: 'HomeIndex',
      
      });
  }

})
</script>

<style lang="less" scoped>
.my-class {
  box-sizing: border-box;
  padding: 68px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.acro-container {
  display: flex;
  height: 100vh;

  background-image: url("@/assets/images/bj.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .banner {
    width: 450px;
    background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
  }

  .content {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
  }
}

.footer_login {
  position: fixed;
  bottom: 4rem;
  left: 10%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.logo {
  position: fixed;
  top: 4rem;
  left: 10%;
  z-index: 1;
  display: inline-flex;
  align-items: center;

  &-text {
    margin-right: 4px;
    margin-left: 4px;
    font-size: 1.3rem;
  }
}
</style>

<style lang="less" scoped>
// responsive
@media (max-width: @screen-lg) {
  .acro-container {
    .banner {
      width: 25%;
    }
  }
}
</style>
